<!--
 * @Date: 2022-04-07 16:59:37
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-08 19:31:26
 * @FilePath: \weibovue\src\components\ValidateBox.vue
 * @Description: 验证组件
-->
<template>
  <div class="loginBox">
    <slot name="header"></slot>

    <slot name="validateCtx"></slot>

    <slot name="submitBtn"></slot>
    <label class="text" v-if="type == '登陆' ? true : false">
      没有账号?点此
      <router-link to="/regsiter">注册</router-link>
    </label>
    <label class="text" v-else>
      我有账号，去
      <router-link to="/login">登陆</router-link>
    </label>
  </div>
</template>
 <script lang='ts' setup>
const props = defineProps({
  type: {
    type: String,
    default: '登陆'
  }
})
</script>
<style lang='less' scoped>
.loginBox {
  background-image: linear-gradient(to right, #add8e6, rgb(221, 218, 230));
  // background-color: #ff8200;
  padding: 20px 40px;
  color: #fff;
  border-radius: 10px;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  h2 {
    text-align: center;
  }
  form {
    .info {
      position: relative;
      margin: 20px 0 40px;
      .fromText {
        position: absolute;
        top: 55px;
        left: 0;
      }

      p {
        position: absolute;
        top: 20px;
        left: 0;
        pointer-events: none;
        span {
          display: inline-block;
          font-size: 18px;
          min-width: 5px;
          transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
      }
    }
  }
  .text {
    display: block;
    margin-top: 30px;
    a {
      color: #ff8200;
      text-decoration: none;
    }
  }
}
</style>